/*
 * @Author: lyztroy lyztroy@bupt.edu.cn
 * @Date: 2022-06-11 13:07:17
 * @LastEditors: lyztroy lyztroy@bupt.edu.cn
 * @LastEditTime: 2022-06-12 17:02:51
 * @FilePath: /visualNotes/src/components/Edge/Association/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from "react";
import { EdgeProps } from "..";
import EditEdge from "../EditEdge";
import {
  // 绘制带圆角的折线
  getSmoothStepPath,
  // 计算出连线的中点
  getEdgeCenter,
  // 绘制连线末端的箭头
  getMarkerEnd,
} from "react-flow-renderer";
import { IconFont } from "@/utils/help";

export type GetSpecialPathParams = {
  sourceX: number;
  sourceY: number;
  targetX: number;
  targetY: number;
};

export const getSpecialPath = (
  { sourceX, sourceY, targetX, targetY }: GetSpecialPathParams,
  offset: number
) => {
  const centerX = (sourceX + targetX) / 2;
  const centerY = (sourceY + targetY) / 2;

  return `M ${sourceX} ${sourceY} Q ${centerX} ${centerY + offset} ${targetX} ${targetY}`;
};

const CustomLine = (props: EdgeProps) => {
  const foreignObjectSize = 24;
  const {
    id,
    sourceX,
    sourceY,
    targetX,
    targetY,
    sourcePosition,
    targetPosition,
    style = {},
    data,
    markerEnd,
    icon,
  } = props;
  // 获取连线中点坐标
  const [edgeCenterX, edgeCenterY] = getEdgeCenter({
    sourceX,
    sourceY,
    targetX,
    targetY,
  });

  console.log(data);
  const edgePath = getSmoothStepPath({
    sourceX,
    sourceY,
    sourcePosition,
    targetX,
    targetY,
    targetPosition,
  });
  const markerEnd1 = getMarkerEnd(markerEnd ?? "arrowclosed");

 

  return (
    <>
      <path
        id={id}
        style={style}
        className="react-flow__edge-path"
        d={edgePath}
        markerEnd={markerEnd1}
      />
      <foreignObject
        width={100}
        height={50}
        x={edgeCenterX - foreignObjectSize / 2}
        y={edgeCenterY - foreignObjectSize / 2}
      >
        <div>
          <IconFont type={icon ?? ""}></IconFont>
          <span>{data.label ? data.label:"关联"}</span>
          <EditEdge edge={props}></EditEdge>
        </div>
        
      </foreignObject>
    </>
  );
};

export default CustomLine;
